<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 500px;
            height: 500px;
            background-color: red;
            display: flex;
        }

        #box2 {
            width: 300px;
            height: 300px;
            background-color: blue;
            margin: auto;
            display: flex;
        }

        #box3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: auto;
        }
    </style>
</head>

<body>
    <!-- 
  1. 系统传过来的一个对象，作为函数的形参
        event  或者简写了e
 2.事件对象：   事件发生后，跟事件相关的一系列信 息数据的集合都放到这个对象里面，这个对象就是事件对象
  3.事件对象的属性和方法：
   e.target   ---返回触发事件对象  的元素--重要
   e.srcElement    不要求记  同上
   e.type  --返回事件的类型  click

   e.cancelBulle 阻止冒泡   ----所有浏览器都生效  ---重要
   e.stopPropagation()    阻止冒泡   高版本浏览器才生效  --重要

   e.preventDefault()  阻止默认行为     ----重要
   超链接跳转  javascript:;      表单提交  return false


     -->
    <!-- <button>单击</button>
     <script>
       var btn= document.querySelector('button');
        btn.addEventListener('click',function(e){
            console.log(e);

        });

       
     </script> -->
    <!-- e.cancelBulle 阻止冒泡 -->
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        var box1 = document.querySelector('#box1')
        var box2 = document.querySelector('#box2')
        var box3 = document.querySelector('#box3')

        // box1.addEventListener('click', function () {
        //     alert('box1')
        // }, false);

        // box2.addEventListener('click', function (e) {
        //     // e.cancelBubble=true;
        //     e.stopPropagation();
        //     alert('box2')
        // }, false)

        // box3.addEventListener('click', function (e) {
        //     console.log(e);
        //     // e.cancelBubble=true;//阻止冒泡
        //     e.stopPropagation();

        //     alert('box3')
        // }, false)


        //  兼容性 代码

        box1.onclick=function(){
            alert('box1');
        }
        box2.onclick=function(e){
            e=e||window.event;
            e.cancelBubble=true;
            alert('box2');
        }
        box3.onclick=function(e){
            //兼容性代码   事件对象的兼容性
           e=e||window.event;
        //     阻止冒泡兼容性的写法
           if(e.stopPropagation){
            e.stopPropagation()
           }else{
            e.cancelBubble=true;
           }
          
            alert('box3');

            console.log(e.target,e.type);
        }
    </script>
</body>

</html>